/**
 * Sencha GXT 3.1.0 - Sencha for GWT
 * Copyright(c) 2007-2014, Sencha, Inc.
 * licensing@sencha.com
 *
 * http://www.sencha.com/products/gxt/license/
 */
@def borderColor value('theme.tabs.borderColor');
@def lastStopColor value('theme.tabs.lastStopColor');
@def inactiveLastStopColor value('theme.tabs.inactiveLastStopColor');

@def headingTextColor value('theme.tabs.headingText.color');
@def headingTextSize value('theme.tabs.headingText.size');
@def headingTextWeight value('theme.tabs.headingText.weight');
@def headingTextFont value('theme.tabs.headingText.family');

@def activeHeadingTextColor value('theme.tabs.activeHeadingText.color');
@def activeHeadingTextSize value('theme.tabs.activeHeadingText.size');
@def activeHeadingTextWeight value('theme.tabs.activeHeadingText.weight');
@def activeHeadingTextFont value('theme.tabs.activeHeadingText.family');

@def tabLeftPadding value('theme.tabs.padding.left', 'px');
@def tabLeftPaddingIcon value('theme.tabs.paddingWithIcon.left', 'px');/*extra space for icon, default to 16px for icon*/
@def tabRightPadding value('theme.tabs.padding.right', 'px');
@def tabRightPaddingClosable value('theme.tabs.paddingWithClosable.right', 'px');/*extra space for close icon*/

@def tabBarBorder value('theme.tabs.tabBarBorder');
@def tabBarBottomHeight value('theme.tabs.tabBarBottomHeight', 'px');
@def tabStripBottomBorder value('theme.tabs.tabStripBottomBorder');

@def tabItemBorderLeft value('theme.tabs.tabItemBorderLeft');
@def tabItemBorderTop value('theme.tabs.tabItemBorderTop');
@def tabItemBorderRight value('theme.tabs.tabItemBorderRight');

@def tabBodyBorder value('theme.tabs.tabBodyBorder');
@def tabTextPadding value('theme.tabs.tabTextPadding.toString');

@def tabIconLeftOffset value('theme.tabs.iconLeftOffset', 'px');
@def tabIconTopOffset value('theme.tabs.iconTopOffset', 'px');

@def scrollerWidth value('theme.tabs.scrollerWidth', 'px');

@def tabHeight value('theme.tabs.tabHeight', 'px');
@def tabSpacing value('theme.tabs.tabSpacing', 'px');


@sprite .tabRight {
  gwt-image: "tabLeft";
  padding-left: tabLeftPadding;
  background-position: bottom left;
  /* Override @sprite behavior */
  width: auto;
  height: tabHeight;
}

@sprite .tabLeft {
  gwt-image: "tabRight";
  padding-right: tabRightPadding;
  /* Override @sprite behavior */
  width: auto;
  height: tabHeight;
  background-position: bottom right;
  /* Override background repetition when preventing sprite sheet inclusion */
  background-repeat: no-repeat;
}

.tabItem {
  height: tabHeight;
  margin-right: tabSpacing;
  border-bottom: tabItemBorderTop;
}

.tabStripActive.tabItem {
  border-top: 1px solid lastStopColor;
}

/* This is already defined in BaseTabPanelStyle, but it is reiterated here to override the rule above */
.tabStripClosable .tabLeft {
  padding-right: tabRightPaddingClosable;
}

@sprite .tabStripOver .tabRight {
  gwt-image: "tabLeftOver";
  /* Override @sprite behavior */
  width: auto;
  height: auto;

  background-position: bottom left;
}

@sprite .tabStripOver .tabLeft {
  gwt-image: "tabRightOver";
  /* Override @sprite behavior */
  width: auto;
  height: auto;
  background-position: bottom right;
  /* Override background repetition when preventing sprite sheet inclusion */
  background-repeat: no-repeat;
}

@sprite .tabStripOver .tabStripInner {
  gwt-image: "tabCenterOver";
  /* Override @sprite behavior */
  height: auto;
  height: tabHeight;
}

@sprite .tabStripActive .tabRight {
  gwt-image: "tabLeftActive";
  /* Override @sprite behavior */
  width: auto;
  height: auto;

  background-position: bottom left;
}

@sprite .tabStripActive .tabLeft {
  gwt-image: "tabRightActive";
  /* Override @sprite behavior */
  width: auto;
  height: auto;
  background-position: bottom right;
  /* Override background repetition when preventing sprite sheet inclusion */
  background-repeat: no-repeat;
}


.tabBar {
  background-color: lastStopColor;
  border: tabBarBorder;
  overflow: hidden;
  padding-top: tabBarBottomHeight;
}

@sprite .tabStrip {
  gwt-image: "tabStripBackground";
  background-position: bottom;
  border-bottom-color: borderColor;
  /* Override @sprite behavior */
  height: auto;
  overflow: visible;
}

.tabStrip span.tabStripText {
  font: normal headingTextWeight headingTextSize headingTextFont;
  color: headingTextColor;
}

.tabStripOver span.tabStripText {
  color: headingTextColor;
}

.tabStripActive span.tabStripText {
  color: headingTextColor;
  font-weight: bold;
}

@sprite .tabStrip .tabStripClosable a.tabStripClose {
  gwt-image: "tabClose";
}

@sprite .tabStrip .tabStripClosable a.tabStripClose:hover {
  gwt-image: "tabClose";
}

.tabBody {
  border: tabBodyBorder;
  overflow: hidden;
  border-bottom: none;
}

.tabScrollerLeft {
  background: transparent no-repeat -scrollerWidth 0;
  border-bottom: 1px solid;
  position: absolute;
  margin-top: 1px;
  left: 0;
  top: 0;
  z-index: 10;
  cursor: pointer;
}

@sprite .tabScrollerLeft {
  gwt-image: "scrollerLeft";
  border-bottom-color: borderColor;
  width: scrollerWidth;
}

@sprite .tabScrollerLeftOver {
  gwt-image: "scrollerLeftOver";
}

@sprite .tabScrollerRight {
  gwt-image: "scrollerRight";
  border-bottom-color: borderColor;
}

@sprite .tabScrollerRightOver {
  gwt-image: "scrollerRightOver";
}






.tab {
  overflow: hidden;
}

@if !user.agent ie6 {
/* Don't bother giving rules to browsers that don't support them */
  .tab {
    outline: none;
  }
}



@if user.agent ie6 {
/* IE6 and IE7 hasLayout workaround */
  .tabBar {
    zoom: 1;
  }
}

.tabStripWrap {
  width: 100%;
  overflow: hidden;
  position: relative;
}

@if user.agent ie6 {
/* IE6 and IE7 hasLayout workaround */
  .tabStripWrap {
    zoom: 1;
  }
}

@if !user.agent ie8 {
  .tabStrip {
    display: block;
    /* Make the tab strip much wider than would be reasonably necessary to avoid tab "wrap". Currently allows for about
     * 8600 tabs. */
    width: 1000000px;
  }
} @else {
  .tabStrip {
    display: block;
    /* widths great than this in ie8 causes north / south resize handles to have white background when tab panel put into window */
    width: 65520px;
  }
}

@if user.agent ie6 {
/* IE6 and IE7 hasLayout workaround */
  .tabStrip {
    zoom: 1;
  }
}

.tabStrip {
  border-top: tabStripBottomBorder;
  border-bottom: 0 none;
}

.tabStrip li {
  float: left;
  position: relative;
}

.tabStrip li.tabEdge {
  float: left;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 none !important;
  font-size: 1px !important;
  line-height: 1px !important;
  overflow: hidden;
  background: transparent !important;
  width: 1px;
}

@if user.agent ie6 {
/* IE6 and IE7 hasLayout workaround */
  .tabStrip li.tabEdge {
    zoom: 1;
  }
}

.tabStrip a,.tabStrip span,.tabStrip em {
  display: block;
}

.tabStrip a {
  text-decoration: none !important;
  cursor: pointer;
}

@if !user.agent ie6 {
  .tabStrip a {
    outline: none;
  }
}

.tabStripInner {
  overflow: hidden;
  text-overflow: ellipsis;
}

@sprite .tabStrip .tabStripInner {
  gwt-image: "tabCenter";
  height: auto;
  height: tabHeight;
  border-bottom: 1px solid inactiveLastStopColor;
  margin-bottom: -1px;
  background-position: bottom;
}

@sprite .tabStrip .tabStripOver .tabStripInner {
  gwt-image: "tabCenterOver";
  height: auto;
  height: tabHeight;
  border-bottom: 1px solid lastStopColor;
  background-position: bottom;
}

@sprite .tabStripActive .tabStripInner {
  gwt-image: "tabCenterActive";
  /* Override @sprite behavior */
  height: auto;
  height: tabHeight !important; /* important to not override with over */
  background-position: bottom;
  border-bottom-color: lastStopColor;
}



.tabStrip span.tabStripText {
  white-space: nowrap;
  cursor: pointer;
  padding: tabTextPadding;
}

.tabWithIcon .tabRight {
  padding-left: 6px;
}


.tabStripActive,.tabStripActive a.tabRight {
  cursor: default;
}

.tabStripActive span.tabStripText {
  cursor: default;
  font: normal activeHeadingTextWeight activeHeadingTextSize activeHeadingTextFont;
  color: activeHeadingTextColor;
}

@if user.agent ie6 ie8 ie9 {
  .tabStrip .tabRight {
    position: relative;
  }
}

.tabStripActive .tabRight {
  /*margin-top: -1px;*/
}

.tabStripActive .tabRight span.tabStripText {
  padding: tabTextPadding;
}

.tabStrip .tabWithIcon span.tabStripText {
  padding-left: 20px;
  background-position: 0 3px;
  background-repeat: no-repeat;
}

.tabStrip .tabStripClose {
  display: none;
}

.tabStripClosable {
  position: relative;
}

.tabStripClosable .tabLeft {
  padding-right: 19px;
}

.tabStrip .tabStripClosable a.tabStripClose {
  background-repeat: no-repeat;
  display: block;
  width: 11px;
  height: 11px;
  position: absolute;
  top: 3px;
  right: 3px;
  cursor: pointer;
  z-index: 2;
}

@if user.agent ie6 ie8 {
  .tabStrip .tabStripClosable a.tabStripClose {
    filter: literal("alpha(opacity=60)");
  }
} @else {
  .tabStrip .tabStripClosable a.tabStripClose {
    opacity: 0.6;
  }
}

.tabStrip .tabStripActive a.tabStripClose {
  opacity: .8;
}

.tabStrip .tabStripClosable a.tabStripClose:hover {
  opacity: 1;
}


.tabScrollerLeftDisabled, .tabScrollerRightDisabled {
  cursor: default;
}

@if user.agent ie6 ie8 {
  .tabScrollerLeftDisabled, .tabScrollerRightDisabled {
    filter: literal("alpha(opacity=50)");
  }
} @else {
  .tabScrollerLeftDisabled, .tabScrollerRightDisabled {
    opacity: .5;
  }
}

.tabScrollerRight {
  border-bottom: 1px solid;
  width: scrollerWidth;
  position: absolute;
  margin-top: 1px;
  right: 0;
  top: 0;
  z-index: 10;
  cursor: pointer;
}

.tabScrolling .tabStripWrap {
  margin-left: scrollerWidth;
  margin-right: scrollerWidth;
}

.tabScrolling {
  position: relative;
}

.tabStrip li .tabImage {
  position: absolute;
}

@if user.agent ie8 {
  .tabStrip li .tabImage {
    top: 4px;
    left: 6px;
  }
} @else {
  .tabStrip li .tabImage {
    top: 3px;
    left: 5px;
  }
}

.tabRight {
  top: 0;
}
